<template>
  <div>
    <a-row>
      <a-col :span="24">
        <a-card
          title="箱体监控"
          size="small"
          :bodyStyle="{ fontSize: '12px' }"
          :headStyle="{ fontSize: '16px' }"
          hoverable
        >
          <a-card-grid
            style="width: 20%; text-align: left; height: 70px"
            v-for="(item, index) in boxMetes"
            :key="index"
          >
            <a-card-meta :description="item.name">
              <a-avatar slot="avatar" :src="item.image" shape="square" />
            </a-card-meta>
            <span :style="{'background-color':item.color}">{{ item.value }}</span>
          </a-card-grid>
        </a-card>
        <a-card
          title="电源监控"
          size="small"
          :bodyStyle="{ fontSize: '12px', textAlign: 'left' }"
          :headStyle="{ fontSize: '10px' }"
          hoverable
        >
          <a-card-grid
            style="width: 20%; text-align: left; height: 70px"
            v-for="(item, index) in powerMetes"
            :key="index"
          >
            <a-card-meta :description="item.name">
              <a-avatar slot="avatar" :src="item.image" shape="square" />
            </a-card-meta>
             <span :style="{'background-color':item.color}">{{ item.value }}</span>
          </a-card-grid>
        </a-card>
      </a-col>
    </a-row>

    <a-row>
      <a-col :span="24">
        <div class="realTimeBox">
          <div class="realTimeBoxHeader flex-between">
            <span>详细信息.</span>
            <div class="infoIconDescDiv">
              <div style="margin-right: 10px">
                <div class="infoIconDesc greenBG"></div>
                <span>正常</span>
              </div>
              <div style="margin-right: 10px">
                <div class="infoIconDesc blueBG"></div>
                <span>关闭</span>
              </div>
              <div style="margin-right: 10px">
                <div class="infoIconDesc redBG"></div>
                <span>告警</span>
              </div>
              <div style="margin-right: 10px">
                <div class="infoIconDesc defaultBG"></div>
                <span>其他</span>
              </div>
            </div>
          </div>
        </div>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="4" v-for="(item, index) in details" :key="index">
        <a-card
          :title="item.name"
          style="height: 100px"
          :headStyle="{ fontSize: '14px' }"
          :bodyStyle="{ fontSize: '10px', textAlign: 'left' }"
          hoverable
        >
          <a-card-meta  v-if="item.value == '' || item.value == '无效'">
           
            <div
              
              slot="avatar"
              class="alternatorListStatus defaultBG"
              :class="{
                greenBG: item.status == 1,
                redBG: item.status == 0,
                blueBG: item.status == 2,
                defaultBG: item.status == 3,
              }"
            >{{item.display}}
            </div>
           
          </a-card-meta>
           <a-card-meta  v-else>
           
            <div
              slot="avatar"
              class="alternatorListStatus defaultBG"
              :class="{
                greenBG: item.status == 1,
                redBG: item.status == 0,
                blueBG: item.status == 2,
                defaultBG: item.status == 3,
              }"
            >{{item.value}}
            </div>
           
          </a-card-meta>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>
<script>
export default {
  name: "RealTime",
  data() {
    return {};
  },
  props: ["boxMetes", "powerMetes", "details"],
};
</script>
<style>
.chartContent {
  padding: 10px 10px;
}
.infoIconDesc {
  height: 8px;
  width: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
  vertical-align: middle;
}

.alterChartCon {
  flex: 1;
  display: flex;
  margin-top: 20px;
  margin-bottom: 20px;
}

.infoIconDescDiv {
  font-size: 14px;
  display: flex;
  font-weight: 500;
}

.alternatorListStatus {
  height: 23px;
  width: 38px;
  border-radius: 30%;
  font-size: 14px;
  text-align: center; 
  display: block;

 
}
/* 实时监控盒子 */
.realTimeBox {
  height: 100%;
  border-top: 2px solid rgba(12, 46, 61, 1);
  padding: 0 20px;
  display: flex;
  flex-direction: column;
}
.realTimeBoxHeader {
  width: 100%;
  height: 50px;
  margin-left: 0px;
  line-height: 50px;
  font-size: 18px;
  border-bottom: 1px rgba(133, 162, 194, 0.3) dashed;
}
.realTimeBoxBody {
  display: flex;
  flex: 1;
  flex-direction: column;
  position: relative;
}
.ant-card-body {
    padding-top: 18px;
    padding-left: 30px;
    zoom: 1;
}
.realTimeBoxItem {
  width: 100%;
  flex: 1;
  border-bottom: 1px rgba(133, 162, 194, 0.3) dashed;
  display: flex;
  align-items: center;
}
.realTimeBoxItem:last-child {
  border-bottom: none;
}
.realTimeBoxItemCon {
  height: 34px;
  width: 100%;
  margin: 0 10px;
  display: flex;
  font-size: 14px;
}
.realTimeBoxItemCon2 {
  display: flex;
  align-items: center;
  flex: 1;
}

.realTimeBoxDec {
  flex: 1;
  margin-right: 20px;
  display: flex;
  justify-content: space-between;
  line-height: 34px;
}
.realTimeBoxDec:last-child {
  margin-right: 0;
}
.realTimeBoxDec2 {
  flex: 1;
  padding: 20px;
  font-size: 14px;
}
.realTimeBoxDecStatusNor {
  height: 30px;
  line-height: 30px;
  padding: 0 15px;
  border: 1px solid rgba(26, 213, 127, 0.2);
  display: inline-block;
  margin-top: 10px;
}
.realTimeBoxDecStatusAbnor {
  height: 30px;
  line-height: 30px;
  padding: 0 15px;
  background: rgba(255, 82, 82, 0.03);
  border: 1px solid rgba(255, 82, 82, 0.2);
  display: inline-block;
  margin-top: 10px;
}
.realTimeItemStatus {
  width: 75px;
  height: 34px;
  font-size: 14px;
  text-align: center;
}
/* 单选btn组 */
.radio_btn_ul {
  display: flex;
  align-items: center;
}

.radio_btn_li {
  padding: 0 15px;
  height: 32px;
  background: rgba(133, 162, 194, 0.06);
  border: 1px solid rgba(133, 162, 194, 0.1);
  border-radius: 2px;
  margin-right: 20px;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  cursor: pointer;
  display: flex;
}
.radio_btn_li:last-child {
  margin-right: 0;
}
.radio_btn_li > span {
  margin-left: 10px;
}

.radio_btn_li_checked {
  border: 1px solid #00abc6;
}

/* 表格分页样式 */
.pagination {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  margin-bottom: 15px;
}
.pageInfo {
  font-size: 14px;
  line-height: 32px;
}
.defaultBG {
  background: #85a2c2;
}
.redBG {
  background: #e54b3e;
}

.blueBG {
  background: blue;
}
.greenBG {
    background: #00ff84;
    color: blue;
}
.alternatorListStatusTit {
  min-width: 100px;
  display: inline-block;
  font-size: 16px;
}
.alterInfoDivItem {
  height: 100%;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
}
.alternatorMidInfoDiv {
  display: flex;
  padding: 20px 20px;
  justify-content: space-between;
  color: #fff;
  font-size: 14px;
  width: 100%;
  height: 100%;
}
.flex-between {
  display: flex;
  justify-content: space-between;
}
.alternatorOpt {
  padding: 15px 0;
}
.alternatorRight {
  flex: 4;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.alternatorRightUp {
  flex: 1;
  height: 300px;
  display: flex;
}
.alternatorRightUpItem {
  height: 100%;
  margin: 10px;
}
.upsImg {
  padding: 10px;
  height: 100%;
  background: rgba(22, 47, 71, 0.2);
}
.upsImg img {
  height: 260px;
}

.alternatorRightDown {
  flex: 2;
  background: rgba(22, 47, 71, 0.2);
  margin: 10px;
  margin-top: 20px;
}
.alternatorRightBotDec {
  width: 100%;
  padding: 10px;
  height: 60px;
  line-height: 40px;
  display: flex;
}

.alternatorRightBotDecItem {
  flex: 1;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  font-size: 14px;
}
.alternatorRightBotDecItemVal {
  font-size: 16px;
  padding: 0 3px;
  color: #00abc6;
  display: inline-block;
}

.alternatorLeft {
  flex: 1;
  height: 100%;
  padding: 0px;
  margin-right: 0px;
  background: rgba(22, 47, 71, 0.5);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.alternatorLeftItem {
  display: flex;
  justify-content: space-between;
  height: 36px;
  line-height: 36px;
}
.leftItemTit {
  color: #fff;
  font-size: 20px;
}
.leftItemTit img {
  height: 36px;
  width: 36px;
  vertical-align: middle;
  margin-right: 5px;
}
.leftItemVal {
  color: #85a2c2;
  font-size: 14px;
}
.leftItemValue {
  color: #00abc6;
  font-size: 24px;
  display: inline-block;
  margin-right: 5px;
}
.alternatorRightDown .el-table thead th {
  color: #85a2c2 !important;
}
.ant-card-grid.ant-card-grid-hoverable {
    padding-left: 6px;
}
</style>